<!--首页-->
<template>
  <div class="home" id="home" name="home">
    <HeadLayout/>
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="460px">
        <el-carousel-item v-for="(item,index) in carousel" :key="index">
          <img style="height:460px;" :src="item.imgPath" :alt="item.describes" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 轮播图END -->
    <div class="main-box">
      <div class="main">
        <!-- 全部商店展示区域 -->
        <div class="shop">
          <div class="box-hd">
            <div class="title">热门推荐</div>
          </div>
          <div class="box-bd">
            <div style="margin-top:15px;background-color: #e0e0e0">
              <div class="promo-list" v-for="(itemPro,index) in productList" :key="index" @click="goDetail(itemPro.id)">
  <!--            <div class="promo-list" >-->
                <img :src="itemPro.itemImg"/>

                <div class="product-item-description">
                  <div style="margin-bottom: 3px;" class="hiddentest">{{itemPro.description}}</div>
                  <div style="color: #fd5d76;font-size: 16px">￥{{itemPro.price}}</div>
                  <div v-if="itemPro.shopItems[0]" style="font-size: 5px">店铺 {{itemPro.shopItems[0].shop.shopName}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 手机商品展示区域END -->
      </div>
    </div>
  </div>
</template>
<script>
import HeadLayout from "@/components/HeadLayout";
export default {
  components:{
    'HeadLayout':HeadLayout
  },
  data() {
    return {
      carousel: [{
        carousel_id:1,
        imgPath:require('../assets/imgs/img1.png'),
        describes:'女装'
      },
        {
          carousel_id:2,
          imgPath:require('../assets/imgs/img2.png'),
          describes:'男装'
        },
        {
          carousel_id:3,
          imgPath:require('../assets/imgs/img3.png'),
          describes:'食品'
        }], // 轮播图数据
      product: "", // 手机商品列表
      miTvList: "", // 小米电视商品列表
      applianceList: "", // 家电商品列表
      applianceHotList: "", //热门家电商品列表
      accessoryList: "", //配件商品列表
      accessoryHotList: "", //热门配件商品列表
      protectingShellList: "", // 保护套商品列表
      chargerList: "", //充电器商品列表
      applianceActive: 1, // 家电当前选中的商品分类
      accessoryActive: 1 ,// 配件当前选中的商品分类
      productList:[],
      shopstore:{}
    };
  },
  mounted() {
    // let user=JSON.parse(localStorage.getItem("user"));
    // let token=user.token;
    this.$axios
        .get("http://localhost:2321/item/getall",
            // {
            //   headers:{
            //     token:token
            //   }
            // }
        )
        .then(res => {
          this.productList=res.data;
        })
        .catch(err => {
          return Promise.reject(err);
        });
  },
  watch: {


  },
  created() {
  },
  methods: {
    //进入商品详情页
    goDetail(goodsId){
      this.$router.push({path:'/goods/details',query:{id:goodsId}});
    },
    // 获取家电模块子组件传过来的数据
    // getChildMsg(val) {
    //   this.applianceActive = val;
    // },
    // 获取配件模块子组件传过来的数据
    // getChildMsg2(val) {
    //   this.accessoryActive = val;
    // },
    // 获取各类商品数据方法封装
    // getPromo(categoryName, val, api) {
    //   api = api != undefined ? api : "/api/product/getPromoProduct";
    //   this.$axios
    //     .post(api, {
    //       categoryName
    //     })
    //     .then(res => {
    //       this[val] = res.data.Product;
    //     })
    //     .catch(err => {
    //       return Promise.reject(err);
    //     });
    // },
    // getData() {
    //   // 如果分类列表为空则请求全部商品数据，否则请求分类商品数据
    //   const api =
    //       this.categoryID.length == 0
    //           ? "/api/product/getAllProduct"
    //           : "/api/product/getProductByCategory";
    //   this.$axios
    //       .post(api, {
    //         categoryID: this.categoryID,
    //         currentPage: this.currentPage,
    //         pageSize: this.pageSize
    //       })
    //       .then(res => {
    //         this.product = res.data.Product;
    //         this.total = res.data.total;
    //       })
    //       .catch(err => {
    //         return Promise.reject(err);
    //       });
    // },
  }
};
</script>
<style scoped>
@import "../assets/css/index.css";
</style>
